@import "var.scss";
@import "global.scss";

.content-list {
  min-height: 500px;
  padding: 0 20px;
  .section-content {
    @include layout(flex-start, stretch, row, wrap);
  }
}

.content-item {
  width: 18%;
  margin: 20px 1%;
  overflow: hidden;
  border-radius: 4px;
  @include box-shadow(0 0 5px 1px rgba(0, 0, 0, 0.1));
  position: relative;
  &:hover {
    @include box-shadow(0 0 5px 2px rgba(0, 0, 0, 0.3));
  }
  &:hover .item-img {
    transform: scale(1.1);
  }
  .item-name {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin: 10px 8px;
    text-align: center;
  }
}

.item-img {
  width: 100%;
  transition: all 0.4s ease;
}

.kuo,
.mask {
  width: 100%;
  padding-bottom: 100%;
  height: 0;
  overflow: hidden;
}

.mask {
  position: absolute;
  top: 0;
  background-color: rgba(52, 47, 41, 0.4);
  transition: all 0.3s ease-in-out;
  opacity: 0;
  @include layout(center);
  > .icon {
    position: absolute;
    top: 40%;
  }
  &:hover {
    opacity: 1;
    cursor: pointer;
  }
}

.icon {
  @include icon(2em, rgba(240, 240, 240, 1));
}
